<script setup lang="ts">
import {ref} from "vue";
import {loginUser, ServerHost} from "@/main";
import {Check, Close, Edit} from "@element-plus/icons-vue";
import axios from "axios";
import {ElNotification} from "element-plus";

const user = ref({})

console.log(loginUser)

const loadUser = () => {
  axios.get(`${ServerHost}/getUser?id=${loginUser.value.id}`)
      .then(res => {
        if (res.status === 200) {
          user.value = res.data
          console.log(user.value)
        }
      })
}
loadUser()

const userInfoInput = ref("")
const updateUserDialogVisible = ref(false)
const updateUserDialogTitle = ref("")
const updateUserProp = ref("")


const onClickUpdateBt = (e: Event) => {
  updateUserDialogTitle.value = e.currentTarget.innerText
  updateUserProp.value = e.currentTarget.dataset.prop;
  updateUserDialogVisible.value = true
  if (updateUserProp.value == 'password')
    userInfoInput.value = ""
  else
    userInfoInput.value = user.value[updateUserProp.value]
}

const onSubmitUpdateUserInfo = () => {
  console.log("onSubmitUpdateUserInfo")
  if (!userInfoInput.value) {
    ElNotification({
      title: '请输入要更新的信息',
      type: 'warning',
      position: 'bottom-right',
    })
    return
  }
  axios.post(`${ServerHost}/updateUserInfo?id=${loginUser.value.id}&prop=${updateUserProp.value}&to=${userInfoInput.value}`)
      .then(res => {
        if (res.status === 200) {
          if (res.data.result == 'ok') {
            ElNotification({
              title: '用户信息更新成功',
              type: 'success',
              position: 'bottom-right',
            })
            updateUserDialogVisible.value = false
            loadUser()
          } else if (res.data.result == 'exist') {
            ElNotification({
              title: '用户名/手机号重复，请重试',
              type: 'warning',
              position: 'bottom-right',
            })
          }
        }
      })
}


</script>

<template>
  <el-card class="m-2">

    <template #header>
      <div class="flex flex-col items-center gap-2">
        <el-popover placement="right" width="auto">
          <template #reference>
            <p class="username text-center">{{ user.username }}</p>
          </template>
          <el-button @click="onClickUpdateBt($event)" :icon="Edit" data-prop="username">修改用户名</el-button>
        </el-popover>

        <el-popover placement="right" width="auto">
          <template #reference>
            <p class="tel text-center" v-if="!user.tel">未绑定手机号</p>
            <p class="tel text-center" v-else>{{ user.tel }}</p>
          </template>
          <el-button @click="onClickUpdateBt($event)" :icon="Edit" data-prop="tel">修改电话</el-button>
        </el-popover>

        <el-popover placement="right" width="auto">
          <template #reference>
            <p class="password text-center" v-if="!user.password">未设置密码</p>
            <p class="password text-center" v-else>● ● ● ● ● ● ● ●</p>
          </template>
          <el-button @click="onClickUpdateBt($event)" :icon="Edit" data-prop="password">修改密码</el-button>
        </el-popover>
      </div>

    </template>

    <div class="flex items-center justify-center gap-8">

      <div class="flex gap-2 items-center" v-if="user.isAdmin">
        <el-button type="primary" :icon="Check" circle/>
        <p style="color: var(--el-color-primary)">您是系统管理员</p>
      </div>
      <div class="flex gap-2 items-center" v-else>
        <el-button :icon="Close" circle/>
        <p style="color: var(--el-color-info)">您不是系统管理员</p>
      </div>

      <div class="flex gap-2 items-center" v-if="user.isSeller">
        <el-button type="primary" :icon="Check" circle/>
        <p style="color: var(--el-color-primary)">您是卖家，可以售卖农产品</p>
      </div>
      <div class="flex gap-2 items-center" v-else>
        <el-button :icon="Close" circle/>
        <p style="color: var(--el-color-info)">您不是农产品卖家，可向管理员申请</p>
      </div>
    </div>

  </el-card>

  <!-- 用户信息更新输入框 -->
  <el-dialog
      v-model="updateUserDialogVisible"
      :title="updateUserDialogTitle">
    <div class="flex flex-col items-center gap-2">
      <el-input v-if="updateUserProp == 'password'" type="password" placeholder="请输入" v-model="userInfoInput"/>
      <el-input v-else placeholder="请输入" v-model="userInfoInput"/>
      <el-button class="w-full" @click="onSubmitUpdateUserInfo">确认修改</el-button>
    </div>
  </el-dialog>

</template>

<style scoped lang="scss">
.username {
  width: fit-content;
  font-family: "思源宋体 Heavy", serif;
}

.tel, .password {
  width: fit-content;
}

</style>
